<template>
	<view class="uni_box home">
		<navbar title='达人商单'>
		</navbar>
		<view class="content">
			<view class="daone">
				<image class="chat" src="@/pages_subject/static/img/chat.png" />
				<text class="tian">派单成功</text>
				<text class="rushi">已将商单推荐给平台达人</text>
				<view class="tannav">
					<image class="fang" src="@/pages_subject/static/img/btwo.png" />
					<text>探店</text>
				</view>
				<text class="rushi" style="margin-top: 30px;">从派单到结算，清晰不忙乱</text>
				<view class="fenbtn">
					分享到群，喊达人报名
				</view>
				<view class="fenbtntwo">
					复制文字版商单
				</view>
				<view class="xian"></view>

				<view class="paiview">
					<text class="paitit">派单记录</text>
					<view class="pailist">
						<view class="paiitem" v-for="(item,index) in 10" :key="index">
							<image class="itemtu" src="/static/new/hone.png" />
							<view class="painav">
								<view class="navone">
									<text class="navtit txt">金豪美发</text>
									<text class="navtime">2024-05-25 15:52</text>
								</view>
								<text class="tan">实探宝子们快来报名啦</text>
							</view>
							<view class="gen">跟进</view>
						</view>
					</view>
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
import Clipboard from '@/utils/clipboard.js';
	export default {
		data() {
			return {
				name:'',
				isshuru:false,

				placeholderStyle:'color:rgba(153, 153, 153, 1)'
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			pasteText(e){
				console.log(e)
				uni.getClipboardData({
					success: (res) => {
						console.log(res)
					}
				})	
				// Clipboard.pasteTextToElement('#inputElementId');
			},
			poiinput(e){
				// console.log(e)
				if(e){
					this.isshuru = true
				}
			},
			poiblur(e){
				// console.log(e)
				this.isshuru = false
			},
			jixu(){
				this.navrouter("/pages_subject/twoPage/Pai/TEdit");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8fd;
	}
	.content{
		background-color: #f8f8fd;
		.xian{
			border: 1px dashed rgba(232, 232, 232, 1);
			display: block;
			margin: 20px 0 10px;
		}
		.daone{
			padding: 0px 20px 20px;
			.zone{
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.chat{
				width: 100%;
				height: 53px;
			}
			.datit{
				margin-left: auto;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.38px;
				color: rgba(119, 102, 231, 1);
			}
			.tannav{
				margin: 40rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 105px;
				height: 105px;
				opacity: 1;
				border-radius: 12px;
				background: rgba(255, 255, 255, 1);
				flex-direction: column;
				border: 2px solid rgba(119, 102, 231, 1);
				.fang{
					width: 36px;
					height: 36px;
					margin-bottom: 10px;
				}
				text{
					font-size: 14px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
			.tian{
				display: block;
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 43.44px;
				margin: 30px 0 2px;
				color: rgba(51, 51, 51, 1);
			}
			.rushi{
				font-size: 14px;
				font-weight: 400;
				display: block;
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
			.fenbtn{
				width: 100%;
				height: 45px;
				opacity: 1;
				border-radius: 50px;
				background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				margin: 10px 0;
			}
			.fenbtntwo{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 45px;
				opacity: 1;
				border-radius: 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				font-size: 16px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 23.17px;
				color: rgba(119, 102, 231, 1);
			}
			
			.fview{
				margin-top: 20px;
				.lxuan{
					width: 10px;
					height: 100%;
					opacity: 1;
					border-radius: 9px 0px 0px 9px;
					background: rgba(119, 102, 231, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					left: 0;
					top: 0;
					position: absolute;
				}
				.mitem{
					margin-bottom: 10px;
					border-radius: 9px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 2px 15px 2px 10px;
					min-height: 50px;
					position: relative;

					.itemname{
						width: 70px;
						border-right: 1px solid rgba(232, 232, 252, 1);
						text-align: center;
						display: inline-block;
						font-size: 14px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						margin-right: 10px;
					}
					.iteminput{
						margin-right: 10px;
					}
					.itemval{
						font-size: 14px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						// max-width: 65%;
						flex: 1;
						display: inline-block;
					}
					.xiao{
						font-size: 11px;
					}
					
					.dinicon{
						width: 18px;
						height: 18px;
					}
					.zhantie{
						margin-left: auto;
						font-size: 12px;
						font-weight: 400;
						text-decoration-line: underline;
						color: rgba(119, 102, 231, 1);
					}
					.zise{
						color: rgba(119, 102, 231, 1);
					}
					.shuru{
						flex: 1;
						margin-right: 20rpx;
					}
					.hui{
						color: rgba(102, 102, 102, 1);
					}


					.daihuoli{
						display: flex;
						flex-direction: row;
						align-items: center;
						.jia{
							width: 36px;
							height: 36px;
							opacity: 1;
							border-radius: 9px;
							background: rgba(248, 248, 253, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.jianicon{
								width: 18px;
								height: 18px;

							}
						}
						.dengname{
							display: inline-block;
							margin: 0 10px;
							font-size: 14px;
							font-weight: 400;
							color: rgba(119, 102, 231, 1);
						}
					}
					.dengji{
						margin-left: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
						.dengtu{
							font-size: 14px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							display: inline-block;
							margin-right: 5px;
						}
						.dengchaun{
							width: 42px;
							height: 21px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(248, 248, 253, 1);
							box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
							display: flex;
							align-items: center;
							justify-content: center;
							.chauntu{
								width: 12px;
								height: 12px;
							}
						}
					}
				}
				.shouxian{
					border: 1px dashed rgba(232, 232, 232, 1);
					display: block;
					margin: 20px 0 13px;
				}
				.shoufang{
					display: flex;
					flex-direction: column;
					
					.shouone{
						display: flex;
						flex-direction: row;
						margin-bottom: 10px;
						align-items: flex-end;
						.shoutit{
							font-size: 14px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							
						}
						.shoumiao{
							display: inline-block;
							margin-left: 20rpx;
							font-size: 12px;
							font-weight: 400;
							position: relative;
							top: -1px;
							color: rgba(153, 153, 153, 1);
						}
						.zi{
							color: rgba(119, 102, 231, 1);
						}
					}
					.shoutwo{
						display: flex;
						flex-direction: row;
						.shouchuan{
							width: 90px;
							height: 130px;
							margin-right: 20px;
							opacity: 1;
							border-radius: 9px 9px;
							background: rgba(255, 255, 255, 1);
							box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
							.schuan{
								width: 100%;
								height: 90px;
								display: flex;
								align-items: center;
								justify-content: center;
								.jijiang{
									font-size: 12px;
									font-weight: 400;
									color: rgba(153, 153, 153, 1);
								}
							}
							.sshuoming{
								height: 40px;
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 14px;
								font-weight: 400;
								color: #999999;
								border-top: 2px solid #eee;
							}
						}
						
						.sative{
							.schuan{
								.jijiang{
									text-decoration-line: underline;
									color: rgba(119, 102, 231, 1);
								}
							}
						}
					}
					.lingqie{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						.qieitem{
							border-radius: 6px;
							background: rgba(255, 255, 255, 1);
							box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
							padding: 10px 10px;
							font-size: 14px;
							font-weight: 400;
							margin-right: 10px;
							margin-bottom: 10px;
							color: rgba(153, 153, 153, 1);
							position: relative;
							.xing{
								color: #7766e7;
								position: absolute;
								right: 3px;
								top: 1px;
								display: none;
							}
						}
						.qieactive{
							border: 1px solid #7766e7;
							color: rgba(51, 51, 51, 1);
							.xing{
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}
	.datwo{
		height: 65px;
		opacity: 1;
		border-radius: 9px;
		background: rgba(248, 248, 253, 1);
		box-shadow: 0px -6px 10px  rgba(119, 102, 231, 0.08);
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 100;
		padding: 10px 20px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.dabtns{
			display: flex;
			flex-direction: row;
			width: 100%;
			.leftbtns{
				width: 160px;
				height: 45px;
				opacity: 1;
				border-radius: 50px 0px 0px 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.dui{
					margin-right: 5px;
					width: 18px;
					height: 18px;
				}
				.zhangname{
					font-size: 12px;
					font-weight: 400;
					color: rgba(119, 102, 231, 1);
				}
			}
			.rightbtns{
				width: 100%;
				height: 45px;
				opacity: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-radius:50px;
				background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				font-size: 16px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
		}
		.tian{
			display: block;
			text-align: center;
			font-size: 12px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;

		}
	}
	.guazai{
		position: relative;
		.guazhan{
			position: relative;
			margin-top: -10px;
			width: 100%;
			height: 360px;
			opacity: 1;
			border-radius: 9px;
			background: rgba(255, 255, 255, 1);
			padding: 10px 20px;
			box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
			.guaname{
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
			.guaxian{
				border: 1px dashed rgba(232, 232, 232, 1);
				position: relative;
				margin-top: 10px;
			}
			.guaadress{
				max-height: 320px;
				position: relative;
				.adlist{
					padding: 10px 0;
					border-bottom: 1px dashed rgba(232, 232, 232, 1);
					display: flex;
					flex-direction: row;
					align-items: center;
					.adleft{
						width: 85%;
						display: flex;
						flex-direction: column;
						.ruiname{
							font-size: 14px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
						}
						.ruidi{
							display: inline-block;
							max-width: 100%;
							font-size: 12px;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);

						}
					}
					.gous{
						margin-left: auto;
						width: 16px;
						height: 16px;
					}
				}
			}
			
		}
	}
	.botyin{
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 40px;
		opacity: 1;
		left: 0;
		border-radius: 0px 0px 9px 9px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	}
	.paiview{
		.paitit{
			display: block;
			font-size: 14px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-bottom: 10px;
		}
		.pailist{
			display: flex;
			flex-direction: column;
			.paiitem{
				padding: 20px;
				border-radius: 12px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
				margin-bottom: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
				.itemtu{
					width: 36px;
					height: 36px;
					border-radius: 5px;
					margin-right: 10px;
				}
				.painav{
					flex: 1;
					display: flex;
					flex-direction: column;
					.navone{
						display: flex;
						flex-direction: row;
						.navtit{
							max-width: 80%;
							display: inline-block;
							font-size: 12px;
							font-weight: 700;
							color: rgba(51, 51, 51, 1);
						}
						.navtime{
							font-size: 10px;
							font-weight: 400;
							display: inline-block;
							margin-left: 10px;
							color: rgba(153, 153, 153, 1);
						}
					}
					.tan{
						font-size: 12px;
						font-weight: 400;
						display: block;
						margin-top: 5px;
						color: rgba(102, 102, 102, 1);
					}
				}

			}
			.gen{
				margin-left: auto;
				width: 60px;
				height: 36px;
				opacity: 1;
				border-radius: 6px;
				background: rgba(248, 248, 253, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);

				border: 1px solid rgba(220, 214, 255, 0.5);
			}
		}
	}
</style>
